<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/sitenav.css">
  <title>Document</title>
</head>
<body>
  <!-- header 头部 -->
  <header id="header">
      <a href="javascript:;" onClick="javascript: history.back(-1);"></a>
      <h1>商城导航</h1>
      <a href="javascript:void(0);">
          <img src="../images/header_app.png" alt="">
      </a>
    </header>
  
    <!-- 商城导航 -->
    <div class="storeNav">
        <ul class="clearfix">
          
          
        </ul>
      </div>
    

    
    <!-- 底部 -->
    <div class="footer">
      <div class="footer_nav">
        <a href="">登录</a>
        <a href="">注册</a>
        <a href="#hearder"><img src="../images/toTop.jpg" alt="">返回顶部</a>
      </div>
      <p>
        <span>手机APP下载</span>
        <span>慢慢买手机版</span>
        <span>-掌上比价平台</span>
      </p>
      <p>m.manmanbuy.com</p>
    </div>
  
</body>
</html>
<script src="../lib/zepto/dist/zepto.js"></script>
<script src="../lib/art-template/template-web.js"></script>
<script type="text/template" id="store-Nav">
  {{each result}}
  <li>
      <a href="{{$value.navHref}}">
        <img src="{{$value.navImg}}" alt="">
        {{$value.navTitle}}
      </a>
    </li>
    {{/each}}
</script>
<script>
   setFont();

window.onresize=function(){
  setFont();
}

// 根据当前屏幕的宽度 动态设置页面根标签的fontsize
function setFont() {
  // 要设置的字体大小  = 基础值 * 要适配的屏幕的宽度 /  设计稿宽度
  // 基础值
  var baseVal = 100;
  // 设计稿的宽度
  var pageWidth = 640;
  // 要适配的屏幕的宽度 = 当前屏幕的宽度
  var screenWidth = document.querySelector("html").offsetWidth;
  // 要设置的字体大小
  if (screenWidth>=640){
    var fontsize = (baseVal * 640)/pageWidth;
  }else if (screenWidth<=320){
    var fontsize = (baseVal * 320)/pageWidth;
  }else {
    var fontsize = (baseVal * screenWidth) / pageWidth;
  }
  // 把字体大小动态设置到 html标签中
  document.querySelector("html").style.fontSize = fontsize + "px";
}

$(function(){
  $.ajax({
        url: "http://193.112.55.79:9090/api/getsitenav",
        type: "get",
        dataType: "json",
        success: function (res) {
           
            var htmlStr = template("store-Nav", res)
            // console.log(htmlStr);
            $(".storeNav ul").html(htmlStr)
      
            
        }
    })
})

</script>